<script lang="ts" setup>
import { getContentAPI, getGoodsAPI, getGoodsCateAPI } from '@/api/goods'
import { useThemeStore } from '@/store'
import { formatMoney } from '@/utils'
import { safeAreaInsets } from '@/utils/systemInfo'

defineOptions({
  name: 'Home',
})
definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  type: 'home',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
})
const tabIndex = ref(0)
const tabsList = ref<any>([])

const goodsList = ref([])
const discountGoods = ref([])
const recommendGoods = ref([])

const swiperList = ref([])
const current = ref<number>(0)

const params = reactive({
  discount: 0,
  cate_id: 12,
  page: 1,
  size: 10,
})

// 获取banner
async function getBanner() {
  const res = await getContentAPI({ page: 1, type: 'SHOP_BANNER' })
  swiperList.value = res.data
}
// 商品分类
async function getGoodsType() {
  const res = await getGoodsCateAPI({ discount: 0, page: 1 })
  tabsList.value = res.data.map((item: any) => {
    item.id = item.id.toString()
    return item
  })
  params.cate_id = res.data[0].id
}
// 获取商品
async function getGoods() {
  const res = await getGoodsAPI(params)
  goodsList.value = res.data
}
// 推荐商品
async function getRecommendGoods() {
  const res = await getGoodsAPI({ page: 1, recommend: 1 })
  recommendGoods.value = res.data
}
// 超值特惠
async function getDiscountGoods() {
  const res = await getGoodsAPI({ page: 1 })
  discountGoods.value = res.data
}

function handleClick(e: any) {
  if (e.item.attachments.length > 0) {
    uni.navigateTo({
      url: `/pages/banner/index?title=${e.item.title}&attachments=${encodeURIComponent(JSON.stringify(e.item.attachments))}`,
    })
  }
}

function handleDetail(item: any) {
  uni.navigateTo({
    url: `/pages/goods/detail?query=${encodeURIComponent(JSON.stringify(item))}`,
  })
}
onLoad(() => {
  getBanner()
  getDiscountGoods()
  getRecommendGoods()
  getGoodsType().then(() => {
    getGoods()
  })
})

function handleTabChange(e: any) {
  params.cate_id = e.name
  getGoods()
}

const themeStore = useThemeStore()
watch(() => themeStore.theme, (newVal) => {
  uni.setNavigationBarColor({
    frontColor: newVal === 'dark' ? '#ffffff' : '#000000',
  })
})
</script>

<template>
  <view :style="{ paddingBottom: `${safeAreaInsets.bottom}px` }">
    <wd-navbar :bordered="false" placeholder safeareainsettop fixed>
      <template #left>
        <view>
          <text class="text-[38rpx] text-[#071110] font-bold">减脂商城</text>
          <text class="ml-2 text-[23rpx] text-[#6C6A6A]">超划算·品质保障·品牌直发</text>
        </view>
      </template>
    </wd-navbar>
    <view class="px-[26rpx]">
      <!-- 轮播图 -->
      <wd-swiper v-model:current="current" :list="swiperList" :display-multiple-items="0" value-key="cover" autoplay height="292rpx" @click="handleClick" />
      <!-- 推荐商品 -->
      <view class="mt-[33rpx] flex justify-between">
        <wd-img v-for="item in recommendGoods" :key="item.id" width="338rpx" height="337rpx" :src="item.cover" @click="handleDetail(item)" />
      </view>
      <!-- 超值特惠 -->
      <view class="my-4 overflow-hidden">
        <view class="mb-2 text-[33rpx] text-[#071110] font-bold">
          超值特惠
        </view>
        <view class="flex overflow-x-scroll">
          <view v-for="item in discountGoods" :key="item.id" class="mr-2 w-[204rpx] rounded-lg bg-white" @click="handleDetail(item)">
            <wd-img width="204rpx" height="204rpx" radius="10rpx" :src="item.cover" />
            <view class="px-2">
              <view class="line-clamp-2 mb-[8rpx] mt-[15rpx] text-[23rpx]">
                {{ item.content }}
              </view>
              <view class="mb-[10rpx] text-[30rpx] text-[#EB0E26] font-bold">
                <text class="text-[22rpx]">￥</text>{{ formatMoney(item.price) }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品 -->
    <wd-tabs v-model="tabIndex" animated :slidable-num="4" inactive-color="#3E3E3E" color="#EB0E26" @change="handleTabChange">
      <block v-for="item in tabsList" :key="item.id">
        <wd-tab :title="item.name" :name="item.id">
          <view class="px-[26rpx]">
            <waterfall v-model="goodsList" @m-change="handleDetail" />
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>
